@import '../utils';

$time: .35s;

.toast-block {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    display: flex;
    display: -webkit-flex;
    display: -webkit-box;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: transparent;
    opacity: 0;
    -webkit-animation: fin $time;
    animation: fin $time;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    &.fade-out {
        -webkit-animation: fout $time;
        animation: fout $time;
    }
    .toast {
        width: 60vw;
        max-width: 600px;
        /*max-height: 200px;*/
        padding: 18px;
        border-radius: 10px;
        background-color: rgba(0, 0, 0, .5);
        user-select: none;
        p {
            text-align: center;
            font-size: 28px;
            color: #fff;
            /*
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            */
        }
    }
    @keyframes fin {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    @keyframes fout {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }
}